import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import weui from 'weui.js';
import weixinShare from '../../lib/weixinShare';
import { addErrorListener } from '../../lib/handleError';

import AJAX from '../../lib/ajax';

const Dialog = require('../MyPackage/components/Dialog')

require('../../lib/rem');
require('../../styles/common.less');
require('./CouponsMy.less');
require('../../styles/iconfont/iconfont.css');

class CouponsMyElem extends Component {
  constructor(props) {
    super(props)

    this.state = {
      isReady: false,     //是否可以加载页面
      userInfo: {},
      couponsList: [],
    };
  }

  componentWillMount() {
    addErrorListener()()
    weixinShare.hideAll()
  }

  componentDidMount() {
    AJAX.request("user_home", {}, (data) => {
      if (data.code === 0) {
        this.setState({
          userInfo: data.body
        }, () => this.fetchCouponsList());
      }
    }, './Coupons')
  }

  /** 获取寄件券列表 */
  fetchCouponsList = () => {
    const { userInfo = {}, current: status = 0 } = this.state;
    const { id, phone, unionid } = userInfo;
    if (id && phone && unionid) {
      const loading = weui.loading('加载中');
      AJAX.request("my_sending_coupon_list", { status }, (data) => {
        if (data.code === 0) {
          this.setState({
            couponsList: data.body || [],
            isLogin: true,
            isReady: true,
          });
        }
      }, './Coupons');
      loading.hide();
    } else window.location.href = './Coupons';
  }

  render () {
    const { couponsList } = this.state;

    let totalCoupon = 0;
    couponsList.map(item => totalCoupon += item.amount);

    return (
      this.state.isReady &&
      <div className="couponsMy">
        <div className="coupons_header">
          <span
            className="icon iconfont iconIcon_left"
            onClick={() => history.back(-1)}
          >
            返回
          </span>
          <label className="header_title">我的寄件券</label>
        </div>
        <div className="couponsMy_main">
          <h2 className="couponsMy_title">
            <span className="title_icon" />
            <label>寄件券总额：{totalCoupon / 100}元</label>
          </h2>
          {couponsList.length ? (
            <div className="coupons_box">
              <ul className="coupons_list">
                {couponsList.map(item => (
                  <li className="coupons_item">
                    <h3 className="item_title">
                      <div>
                        <img src={item.taskIcon} alt={item.taskName} />
                        <label>{item.taskName}</label>
                      </div>
                      <span>{item.createTime}</span>
                    </h3>
                    <div className="item_content">
                      <div className="content_price">
                        <span>¥</span>
                        <label>{item.amount / 100 || 0}</label>
                      </div>
                      <div className="content_info">
                        <label>寄件券</label>
                        <h4>无金额门槛</h4>
                        <p>有效期：{item.startTime}-{item.endTime}</p>
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
              <div className="coupons_code">
                <img src="https://cdn2.jinlb.cn/pic/eb/dd/ebdd66aab740812c79e80b0e7173e977.jpg" alt="去寄件" />
                <p>长按识别二维码去寄件</p>
              </div>
            </div>
          ) : (
            <div className="unTask">
              <img src="https://cdn2.jinlb.cn/pic/28/e3/28e3a276486b02939bea4c1c08e5b062.png" />
              <p>您还没有寄件券，快去做任务赚取寄件券吧！</p>
              <a className="doTask" href="./Coupons">做任务</a>
            </div>
          )}
        </div>
      </div>
    )
  }
}
ReactDOM.render(<CouponsMyElem />, document.getElementById('app'));
if (module.hot) {
  module.hot.accept();
}

